<template>
  <!-- 产品查询 -->
  <div class="daycall">
    <el-card>
      <!-- 搜索 -->
      <el-form :inline="true" :model="productData" class="demo-form-inline">
        <el-input size="small" style="width:200px" v-model="userName" align="center" placeholder="输入用户名查询" clearable>
        </el-input>
        &ensp;
        <el-button type="primary" size="small" plain icon="el-icon-search" @click="getproductdata()">查询</el-button>
        <el-button type="success" size="small" plain icon="el-icon-position" @click="exportExcel()">导出</el-button>
      </el-form>
      <br>
      <!-- 数据显示 -->
      <el-table v-loading="loading" id="legacy" :data="ndata.pageList" style="width: 100%; margin-bottom: 20px"
        row-key="id" border :tree-props="{ children: 'priceList', hasChildren: 'hasChildren' }">
        <el-table-column prop="username" label="用户名" width="150" align="left">
          <template slot-scope="scope">
            <span style="font-weight: 700; color: #666">
              {{ scope.row.username }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="mark" align="center" label="产品名称">
        </el-table-column>
        <el-table-column prop="code" width="170" label="产品编号" align="center">
        </el-table-column>
        <!-- <el-table-column label="产品原价" width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.apiback">￥{{ JSON.parse(scope.row.apiback).price || null
            }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="专属折扣" width="80" align="center">
          <template slot-scope="scope" v-if="scope.row.apiback">
            <span>{{
                JSON.parse(scope.row.apiback).discount || null
            }}</span>
          </template>
        </el-table-column> -->
        <el-table-column label="价格" width="80" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.shopPrice">￥{{ scope.row.shopPrice }}</span>
          </template>
        </el-table-column>
        <!-- 产品操作0 -->
        <el-table-column label="产品操作" v-if="this.$store.state.user.role == 'admin'" align="center">
          <template slot-scope="scope">
            <el-button size="small" icon="el-icon-circle-plus-outline" plain
              @click="handleAdd(scope.$index, scope.row)">添加</el-button>
            <el-button size="small" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" icon="el-icon-delete" plain @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
        <!-- 产品操作1 -->
      </el-table>
      <!-- 分页 -->
      <!-- currentPage -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="ndata.totalCount">
      </el-pagination>
    </el-card>
    <!-- 编辑弹框 -->
    <el-dialog :title="'编辑产品：' + editform.mark" center width="50%" :visible.sync="editdialog"
      :close-on-click-modal="false">
      <el-form :inline="true" :model="editform">
        <el-form-item label="所属用户:" :label-width="formLabelWidth">
          <el-input style="width: 200px" size="medium" disabled v-model="editform.status" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品名称:" :label-width="formLabelWidth">
          <el-input style="width: 200px" size="medium" disabled v-model="editform.mark" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 产品价格0 -->
        <el-form-item label="产品售价:" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="editform.shopPrice" size="medium" @change="shopPriceChange"
            :min="0.0001" :max="9999999" label="描述文字"></el-input-number>
        </el-form-item>
        <!-- 产品价格1 -->
        <!-- 产品价格0 -->
        <el-form-item label="产品原价:" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="editform.price" size="medium" @change="shopPriceChange"
            :min="0.0001" :max="9999999" label="描述文字">
          </el-input-number>
        </el-form-item>
        <!-- 产品价格1 -->
        <!-- 产品价格0 -->
        <el-form-item label="产品折扣:" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="editform.discount" size="medium" @change="shopPriceChange"
            :min="0" :max="100" label="描述文字">
          </el-input-number>
        </el-form-item>
        <!-- 产品价格1 -->

        <!-- 通道名称选择1 -->
        <el-form-item label="通道名称:" :label-width="formLabelWidth">
          <el-select style="width: 200px" size="medium" v-model="editwayvalue" placeholder="请选择一个通道">
            <el-option v-for="item in editwayoptions" :key="item.id" :label="item.username" :value="item.id + ''">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 通道名称选择1 -->

        <!-- 产品限制0 -->
        <el-form-item label="产品限制:" :label-width="formLabelWidth">
          <el-select style="width: 200px" v-model="editform.quota" size="medium" placeholder="请选择">
            <el-option v-for="item in xzoptions" :key="item.value" :label="item.label" :value="item.value + ''">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 产品限制1 -->
        <!-- 产品占比0 -->
        <el-form-item label="产品占比:" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" size="medium" v-model="editform.proportion" @change="shopPriceChange"
            :step="0.01" :min="0" :max="1" label="百分比"></el-input-number>
        </el-form-item>
        <!-- 产品占比1 -->

        <!-- 回调地址0 -->
        <el-form-item label="回调地址:" :label-width="formLabelWidth">
          <el-input size="medium" placeholder="请输入回调地址" v-model="editform.backUrl" clearable style="width: 200px">
          </el-input>
        </el-form-item>
        <!-- 回调地址1 -->

        <!-- 产品备注0 -->
        <el-form-item label="产品备注:" :label-width="formLabelWidth">
          <el-input size="medium" style="width: 200px" v-model="editform.params" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 产品备注1 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="editdialogyes()">确 定</el-button>

        <el-button size="medium" @click="editdialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 编辑弹框 -->
    <!-- 添加弹框 -->
    <el-dialog :title="'为用户：' + addform.username + '添加产品'" center width="50%" :visible.sync="adddialog"
      :close-on-click-modal="false">
      <el-form :inline="true" :model="addform">
        <el-form-item label="用户名称：" :label-width="formLabelWidth">
          <el-input disabled style="width: 200px" v-model="addform.username" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 产品下拉 -->
        <el-form-item label="产品名称：" :label-width="formLabelWidth">
          <el-select style="width: 200px" v-model="productvalue" value-key="id" placeholder="请选择一个产品">
            <el-option v-for="item in productoptions" :key="item.id" :label="item.username" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 产品下拉 -->
        <!-- 通道下拉0 -->
        <el-form-item label="通道名称：" :label-width="formLabelWidth">
          <el-select style="width: 200px" v-model="wayvalue" placeholder="请选择一个通道">
            <el-option v-for="item in wayoptions" :key="item.id" :label="item.username" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 通道下拉1 -->
        <!-- 产品价格0 -->
        <el-form-item label="产品原价：" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="addform.price" @change="shopPriceChange" :min="0.001"
            :max="9999999" label="描述文字"></el-input-number>
        </el-form-item>
        <!-- 产品价格1 -->
        <!-- 产品价格0 -->
        <el-form-item label="产品折扣：" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="addform.discount" @change="shopPriceChange" :min="0"
            :max="100"></el-input-number>
        </el-form-item>
        <!-- 产品价格1 -->
        <!-- 产品价格0 -->
        <el-form-item label="产品售价：" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="addform.shopPrice" @change="shopPriceChange" :min="1"
            :max="10000">
          </el-input-number>
        </el-form-item>
        <!-- 产品价格1 -->
        <!-- 产品占比0 -->
        <el-form-item label="产品占比：" :label-width="formLabelWidth">
          <el-input-number style="width: 200px" v-model="addform.proportion" @change="shopPriceChange" :step="0.01"
            :min="0" :max="1" label="百分比"></el-input-number>
        </el-form-item>
        <!-- 产品占比1 -->
        <!-- 产品限制0 -->
        <el-form-item label="产品限制：" :label-width="formLabelWidth">
          <el-select style="width: 200px" v-model="xzvalue" placeholder="请选择一个限制">
            <el-option v-for="item in xzoptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <!-- 产品限制1 -->
        <!-- 回调地址0 -->
        <el-form-item label="回调地址：" :label-width="formLabelWidth">
          <el-input placeholder="请输入回调地址" v-model="addform.backUrl" clearable style="width: 200px"></el-input>
        </el-form-item>
        <!-- 回调地址1 -->
        <!-- 产品备注0 -->
        <el-form-item label="产品备注：" :label-width="formLabelWidth">
          <el-input placeholder="请输入产品备注" v-model="addform.mark" clearable style="width: 200px"></el-input>
        </el-form-item>
        <!-- 产品备注1 -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="addformyes()">确 定</el-button>

        <el-button size="medium" @click="adddialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 添加弹框 -->
    <!-- 删除弹框0 -->
    <el-dialog title="
          温馨提示
          " center width="50%" :visible.sync="deletedialog" :close-on-click-modal="false">
      您确定删除用户{{ this.deleteform.username }}的{{
        this.deleteproduct
      }}产品吗？
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteyes()">确 定</el-button>

        <el-button @click="deletedialog = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 删除弹框1 -->
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
import { getPrice } from "@/api/order";
import {
  getModel,
  getSupplier,
  addPrice,
  deleteModel,
  updateModel,
} from "@/api/product";

// 引入防抖函数
import debounce from "lodash.debounce";
import { Message } from "element-ui";
export default {
  name: "Userbill",
  data() {
    return {
      // 加载
      loading: false,
      //编辑
      editdialog: false,
      adddialog: false,
      deletedialog: false,
      formLabelWidth: "120px",
      // 用户添加产品
      addform: {
        username: "",
        apiKey: "",
        supplier: "",
        price: "",
        shopPrice: "",
        back: "",
        discount: "",
        mark: "备注",
        quota: "",
        content: "",
        proportion: "",
        backUrl: "http://",
      },
      // 限制下拉
      xzoptions: [
        {
          value: 0,
          label: "限制发送",
        },
        {
          value: -1,
          label: "无限制",
        },
      ],
      // 产品下拉
      productoptions: [],
      // 通道下拉
      wayoptions: [],
      productvalue: {
        id: "SHLL0001_1_1001",
        username: "CU_全国_销售_1日_1G_新",
      },
      wayvalue: 2,
      xzvalue: 0,
      // 产品删除
      deleteform: {
        username: "",
        apiKey: "",
      },
      deleteproduct: "",
      // 产品编辑
      editform: {
        mark: "",
        shopPrice: "",
        price: "",
        discount: "",
        status: "",
        params: "",
        quota: "",
        pricingId: "",
        proportion: "",
        backUrl: "",
      },
      editwayoptions: [],
      editwayvalue: "",
      // 搜索条件
      productData: {
        username: "",
        pageNum: 1,
        pageSize: 10,
      },
      userName: "",
      // 数据
      ndata: {},
    };
  },
  async created() {

    this.priceData();
    this.getproductdata()

    // // 所有产品
    let res = await getModel();
    // // 产品通道
    let res1 = await getSupplier();
    this.productoptions = res.data;
    this.wayoptions = res1.data;
    this.editwayoptions = res1.data;
  },
  methods: {
    exportExcel() {
      //导出当前表格
      var wb = XLSX.utils.table_to_book(document.querySelector("#legacy")); //表格id
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "价格表.xlsx"
        ); //文件名
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    productchange(index) {
      //console.log(index);
    },

    // 产品添加
    handleAdd(index, row) {
      if (row.priceList) {
        this.adddialog = true;
        this.addform.username = row.username;
      } else {
        Message("产品不可添加产品，请选择某一用户进行添加产品");
      }
      //console.log("添加索引", index);
      //console.log("添加行", row);
    },
    //产品价格改变
    shopPriceChange(value) {
      //console.log(value);
    },
    // 产品添加确认
    async addformyes() {
      this.adddialog = false;
      this.addform.apiKey = this.productvalue.id;
      this.addform.content = this.productvalue.username;
      this.addform.supplier = this.wayvalue;
      this.addform.quota = this.xzvalue;
      this.addform.back = `{"proportion":${this.addform.proportion},"discount":${this.addform.discount},"apiback":"${this.addform.backUrl}","price":${this.addform.price}}`;
      // console.log(this.addform);
      let res = await addPrice(this.addform);
      //console.log(res);
      this.priceData();
    },
    // 产品编辑
    handleEdit(index, row) {
      if (row.code) {
        let a = JSON.parse(row.apiback);
        this.editdialog = true;
        this.editform.mark = row.mark;
        this.editform.shopPrice = row.shopPrice;
        this.editform.price = a.price;
        this.editform.discount = a.discount;

        this.editform.supplier = row.supplier;
        this.editform.status = row.status;
        this.editform.params = row.params;
        this.editform.quota = row.quota;
        this.editform.proportion = row.proportion;
        this.editform.backUrl = a.apiback;

        this.editform.pricingId = row.pricingId;
        this.editwayvalue = row.supplier;
      } else {
        Message("用户不可编辑，请选择某一产品进行编辑");
      }
      //console.log("编辑索引", index);
      //console.log("编辑行", row);
    },
    // 编辑确认
    async editdialogyes() {
      //console.log(this.editwayvalue);
      let dataa = {
        supplier: this.editwayvalue,
        shopPrice: this.editform.shopPrice,
        mark: this.editform.params,
        quota: this.editform.quota,
        pricingId: this.editform.pricingId,
        proportion: this.editform.proportion,
        back: `{"proportion":${this.editform.proportion},"discount":${this.editform.discount},"apiback":"${this.editform.backUrl}","price":${this.editform.price}}`,
      };
      this.editdialog = false;
      let res = await updateModel(dataa);
      //console.log(res);
      this.priceData();
    },
    // 产品删除
    async handleDelete(index, row) {
      if (row.code) {
        this.deletedialog = true;
        this.deleteform.username = row.status;
        this.deleteform.apiKey = row.apiKey;
        this.deleteproduct = row.mark;
      } else {
        Message("用户不可删除，请选择某一产品进行删除");
      }
      //console.log("删除索引", index);
      //console.log("删除行", row);
    },
    // 产品删除确认
    async deleteyes() {
      let res = await deleteModel(this.deleteform);
      //console.log(res);
      this.deletedialog = false;
      this.priceData();
    },
    // 获取数据
    async priceData() {
      this.loading = true;
      let res = await getPrice(this.productData);
      if (res) {
        this.ndata = res.data;
        this.loading = false;

      } else {
        this.ndata = [];
      }
    },
    // 搜索
    getproductdata: debounce(function () {
      this.productData.username = this.userName;
      this.priceData();
    }, 500),
    // 分页查询
    async handleSizeChange(val) {
      this.productData.pageSize = val;
      this.priceData();
    },
    async handleCurrentChange(val) {
      this.productData.pageNum = val;
      this.priceData();
    },
  },
};
</script>